<template>
  <div class="welfate-center-sidebar">
    <div class="avatar-box">
      <img :src="loginUser ? processImageUrl(loginUser.avatar) : defaultAvatar">
    </div>
    <template v-if="!loginUser">
      <div class="login-btn" @click="onShowLoginDialog"></div>
      <div class="login-tips">未有账号？现在<span @click="onShowLoginDialog">注册</span> </div>
    </template>

    <template v-else>
      <div class="top-title">个人中心</div>
      <div class="nickname">{{loginUser.nickname}}</div>
      <div class="profile">
        <span>我的硬币:</span>
        <span class="coin">{{loginUser.coin}}</span>
      </div>

      <Task :list="[]"></Task>
    </template>

  </div>

  <LoginDialog v-model="showLoginDialog" @close="showLoginDialog = false"></LoginDialog>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, reactive, toRefs } from 'vue'
import LoginDialog from '@/components/login/Index.vue'
import Task from './Task.vue'
import { useStore } from '@/store'
import defaultAvatar from '@/static/img/welfare/defautl_avatar.png'
import { processImageUrl } from '@/utils'

export default defineComponent({
  name: 'Sidebar',
  components: {
    LoginDialog,
    Task
  },
  setup(props, { emit }) {
    const closeDialog = inject("closeDialog")
    const store = useStore()
    const state = reactive({
      showLoginDialog: false,
      loginUser: computed(() => store.state.user)
    })

    onMounted(() => {
    })

    function onShowLoginDialog() {
      state.showLoginDialog = true
      closeDialog()
    }

    return {
      ...toRefs(state),
      onShowLoginDialog,
      defaultAvatar,
      processImageUrl,
    }
  }
})
</script>

<style lang="scss" scoped>
.welfate-center-sidebar {
  width: 268px;
  height: 563px;
  background-image: url(@/static/img/welfare/bg_sidebar.png);
  position: relative;

  .avatar-box {
    width: 168px;
    height: 168px;
    margin: 26px 50px;
    background-image: url(@/static/img/welfare/bg_avatar.png);
    display: flex;
    justify-content: center;
    align-items: center;

    & img {
      width: 90px;
      height: 90px;
      display: block;
      border-radius: 50%;
    }
  }

  .login-btn {
    width: 213px;
    height: 68px;
    background-image: url(@/static/img/welfare/btn_login.png);
    margin: 0 auto;
    margin-top: 22px;
    cursor: pointer;
  }

  .login-tips {
    margin-top: 10px;
    text-align: center;
    font-size: 16px;
    color: #E7E3FF;
    font-weight: 600;
    & span {
      cursor: pointer;
      color: #FFEA00;
    }
  }

  .top-title {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: #E7E3FF;
    position: absolute;
    top: 10px;
  }

  .nickname, .profile {
    width: 100%;
    position: absolute;
    top: 180px;
    font-size: 16px;
    text-align: center;
    color: #E7E3FF;
    font-weight: 600;
  }

  .profile {
    top: 206px;
    .coin {
      color: #FFEA00;
    }
    .coin::before {
      content: '';
      background-image: url(@/static/img/welfare/icon_coin.png);
      width: 20px;
      height: 20px;
      background-size: 100%;
      display: inline-block;
      margin: 0 5px;
      vertical-align: sub;
    }
  }
}

@media screen and (max-width: 768px) {
  .welfate-center-sidebar {
    display: none;
  }
}
</style>